<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      title="选择运动类型"
      width="381px"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <template #header>
        <div class="flex justify-between items-center">
          <p>选择运动类型</p>
          <el-button type="primary" @click="handleBatch">批量选择</el-button>
        </div>
      </template>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in dict?.type?.site_type" :key="item.value" :label="item.value">{{
          item.label
        }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDict } from '@/utils/dict'
import { ElMessage } from 'element-plus'

// 字典数据
const { dict } = useDict({
  dicts: ['site_type'],
})

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const dialogVisible = ref(false)
const checkList = ref<(string | number)[]>([])

// 加载数据
const init = () => {
  dialogVisible.value = true
  // checkList id改为字符串
  checkList.value = checkList.value.map((item) => String(item))
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  // emit("refreshShow", { type: "chooseMotionType", applySport: [] });
}

// 提交
const submitForm = () => {
  if (checkList.value.length <= 0) {
    ElMessage.warning('请选择运动类型')
    return
  }
  dialogVisible.value = false
  emit('refreshShow', {
    type: 'chooseMotionType',
    applySport: checkList.value,
  })
}

// 批量选择
const handleBatch = () => {
  checkList.value = dict.value.type.site_type.map((item: any) => item.value)
}

// 暴露方法给父组件
defineExpose({
  init,
})
</script>

<style scoped lang="scss">
:deep(.el-dialog__header) {
  border-radius: 6px 6px 0 0;
  background: rgba(243, 244, 246, 1);
  padding: 7px 15px;
  p {
    font-size: 14px;
    color: #383838;
  }
}
:deep(.el-dialog__body) {
  padding: 11px 0 22px 18px;
  .el-checkbox-group {
    .el-checkbox {
      width: 40%;
      margin-right: 0;
      margin-bottom: 27px;
    }
    .el-checkbox__label {
      padding-left: 29px;
      color: #383838;
    }
    .el-checkbox__inner {
      width: 17px;
      height: 17px;
      border-radius: 0;
      border-color: #a6a6a6;
      &::after {
        top: 2px;
        left: 5px;
      }
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      border-color: #1890ff;
    }
  }
}
</style>
